<template>
	<view class="store-join-index e-rela" :style="[AppSkinVar]">
		<!--  #ifndef H5  -->
		<e-navbar bgColor="transparent" @leftClick="$back(1)">
			<view slot="left">
				<image src="../static/arrow1.png" class="img-36"></image>
			</view>
		</e-navbar>
		<!--  #endif -->
		<view class="store-join-index__bg e-abso e-flex-x-center">
			<image src="../static/icon1.png" class="store-join-index__bg__icon"></image>
		</view>
		<view class="store-join-index__body e-rela">
			<view class="e-font-64 c-white fw-500 e-m-b-20 text-center">
				<text>{{toI18('joinTitle1')}}</text>
			</view>
			<view class="e-font-64 c-white fw-500 text-center e-m-b-10">
				<text>{{toI18('joinTitle2')}}</text>
			</view>
			<view class="e-flex-xy-center e-m-b-32">
				<view class="e-flex e-m-r-26">
					<image src="../static/icon2.png" class="img-24 e-m-r-10"></image>
					<text class="e-font-24 c-white opacity-7 ">{{toI18('joinTitle3')}}</text>
				</view>
				<view class="e-flex e-m-r-26">
					<image src="../static/icon2.png" class="img-24 e-m-r-10"></image>
					<text class="e-font-24 c-white opacity-7">{{toI18('joinTitle4')}}</text>
				</view>
				<view class="e-flex">
					<image src="../static/icon2.png" class="img-24 e-m-r-10"></image>
					<text class="e-font-24 c-white opacity-7">{{toI18('joinTitle5')}}</text>
				</view>
			</view>
			<view class="e-p-l-32 e-p-r-32 e-m-b-50">
				<view class="store-join-index__body__form bg-white">
					<view class="e-flex-xy-center e-m-b-10">
						<view class="store-join-index__body__title e-rela">
							<text class="e-font-36 fw-600">{{toI18('joinSubTitle1')}}</text>
						</view>
					</view>
					<view class="text-center e-m-b-36">
						<text class="c-regular">{{toI18('joinSubTitle2')}}</text>
					</view>
					<view class="store-join-index__body__form-step e-flex-x-center e-m-b-36">
						<view class="text-center">
							<view class="e-flex-xy-center">
								<view class="store-join-index__body__form-step__icon e-flex-xy-center e-m-b-22">
									<text class="c-primary e-font-36 fw-600">1</text>
								</view>
							</view>
							<text class="fw-600">{{toI18('szzh')}}</text>
						</view>
						<image src="../static/icon3.png" class="store-join-index__body__form-step__img"></image>
						<view class="text-center">
							<view class="e-flex-xy-center">
								<view class="store-join-index__body__form-step__icon e-flex-xy-center e-m-b-22">
									<text class="c-primary e-font-36 fw-600">2</text>
								</view>
							</view>
							<text class="fw-600">{{toI18('zzrz')}}</text>
						</view>
					</view>
					<view class="store-join-index__body__form-btn bg-primary e-flex-xy-center e-m-b-20"
						hover-class="opacity-7" @tap="jump">
						<text class="fw-600 c-white e-font-32">{{toI18('joinBtnTxt')}}</text>
					</view>
					<view class="text-center e-m-b-20">
						<text class="c-secondary e-font-24">{{toI18('joinSubTitle10')}}</text>
					</view>
					<view class="text-center" @tap="goStoreApp">
						<text>{{toI18('joinLogin')}}</text>
					</view>
				</view>
			</view>
			<view class="store-join-index__body__foot e-p-b-30">
				<view class="store-join-index__body__title e-rela e-m-b-50">
					<text class="e-font-36 fw-600">{{toI18('joinSubTitle3')}}</text>
				</view>
				<view class="e-flex e-m-b-40">
					<view class="store-join-index__body__foot-icon e-m-r-20 e-rela e-flex-xy-center">
						<text class="store-join-iconfont icona-dianpuzhuye e-font-42 c-primary"></text>
					</view>
					<view>
						<view class="e-m-b-10">
							<text class="fw-600">{{toI18('joinSubTitle4')}}</text>
						</view>
						<view>
							<text class="c-regular">{{toI18('joinSubTitle5')}}</text>
						</view>
					</view>
				</view>
				<view class="e-flex e-m-b-40">
					<view class="store-join-index__body__foot-icon e-m-r-20 e-rela e-flex-xy-center">
						<text class="store-join-iconfont iconyingxiaoduanxin e-font-42 c-primary"></text>
					</view>
					<view>
						<view class="e-m-b-10">
							<text class="fw-600">{{toI18('joinSubTitle6')}}</text>
						</view>
						<view>
							<text class="c-regular">{{toI18('joinSubTitle7')}}</text>
						</view>
					</view>
				</view>
				<view class="e-flex e-m-b-40">
					<view class="store-join-index__body__foot-icon e-m-r-20 e-rela e-flex-xy-center">
						<text class="store-join-iconfont iconqianbao e-font-42 c-primary"></text>
					</view>
					<view>
						<view class="e-m-b-10">
							<text class="fw-600">{{toI18('joinSubTitle8')}}</text>
						</view>
						<view>
							<text class="c-regular">{{toI18('joinSubTitle9')}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<e-popup :show="showPop" mode="center" round="20">
			<view class="pop-panel">
				<view class="c-333 e-font-32 fw-600 e-flex-xy-center e-m-b-40">
					提示
				</view>
				<view class="e-p-l-30 e-p-r-30">
					<view class="c-999 e-font-30 e-m-b-30">
						已入驻店铺，可复制下方链接在PC浏览器打开商家端或者直接进入店铺助手
					</view>
					<view class="e-flex-xy-center e-m-b-30" @tap="$copy('https://jxsc.hnyouzhixuan.com/merchant/#/login')">
						<view class="e-line-1 e-flex-1">
							https://jxsc.hnyouzhixuan.com/merchant/#/login
						</view>
						<view class="c-primary">
							复制
						</view>
					</view>
				</view>
				<view class="e-flex-xy-center pop-panel-footer">
					<view class="pop-panel-footer-left e-font-32 e-flex-xy-center e-flex-1" @tap='showPop = false'>
						取消
					</view>
					<view class="pop-panel-footer-right c-primary e-flex-xy-center e-flex-1 e-font-32" @tap="handleToStore">
						去店铺助手
					</view>
				</view>
			</view>
			
		</e-popup>
	</view>
</template>

<script setup lang="ts">
	import {ref} from 'vue'
	import {
		getUserRegisterStoreState
	} from '@/common/request/api'
	import {
		useI18n,
		useCurrentInstance
	} from '@/common/hooks'
	
	const toI18 = useI18n('store')

	const ctx = useCurrentInstance()
	
	const showPop = ref(false)
	const handleToStore = () =>{
		ctx.$goTo('/pages/web',{url:'https://jxsc.sdmoshutong.com/assistant/'})
	}
	
	
	const jump = () => {
		getUserRegisterStoreState().then(res => {
			if (res.data.state === 1) {
				ctx.$goTo('/pages/store/join/success', {
					type: 'success'
				})
			} else if (res.data.state === 2) {
				// ctx.$showModal({
				// 	content: toI18('joinSuccess'),
				// 	confirmText: ctx.$t('classify.我知道了'),
				// 	success: res => {
				// 		if (res.confirm) {

				// 		}
				// 	}
				// })
				showPop.value = true
			} else if (res.data.state === 3) {
				ctx.$goTo('/pages/store/join/success', {
					type: 'error'
				})
			} else {
				ctx.$goTo('/pages/store/join/type')
			}

		})

	}
	const goStoreApp = () => {
		// #ifdef APP-PLUS
		if (plus.os.name == 'Android') {
			plus.runtime.launchApplication({
				pname: 'com.sxw.manbingguanli.doctor'
			},
				(e) => {
					console.log('唤醒app失败: ' + e.message);
				}
			)
		} else if (plus.os.name == 'iOS') {
			plus.runtime.launchApplication({
				action: 'sxwManbingguanliDoctor://'
			}, (e) => {
				console.log('唤醒app失败: ' + e.message);
			});
		}
		// #endif
		// #ifdef MP-WEIXIN||MP-ALIPAY
		uni.navigateToMiniProgram({
			appId: '',
			path: 'pages/splash',
			fail(e) {
				console.log('打开小程序失败: ', e);
			}
		})
		// #endif
	}
</script>
<style>
	page {
		background: #ffffff;
	}
</style>
<style lang="scss" scoped>
	@import url('../static/font/iconfont.css');

	.store-join-index {
		min-height: 100vh;
		// #ifdef H5
		padding-top: 202rpx;
		// #endif
		// #ifndef H5
		padding-top: calc(var(--status-bar-height) + 142rpx);

		// #endif
		.opacity-7 {
			opacity: .7
		}

		&__bg {
			left: 0;
			right: 0;
			top: 0;
			width: 100vw;
			height: 830rpx;
			background: linear-gradient(180deg, var(--color-primary) 45%, #FFFFFF 100%);
			z-index: 1;
			// #ifdef H5
			padding-top: 66rpx;
			// #endif
			// #ifndef H5
			padding-top: var(--status-bar-height);
			// #endif

			&__icon {
				width: 620rpx;
				height: 122rpx;
			}
		}

		&__body {
			z-index: 2;

			&__form {
				padding: 40rpx 62rpx 50rpx 62rpx;
				box-shadow: 0 0 40rpx 0 rgba(0, 0, 0, 0.1);
				border-radius: 40rpx;

				&-step {
					&__icon {
						width: 60rpx;
						height: 60rpx;
						border-radius: 100%;
						border: 4rpx solid var(--color-primary);
					}

					&__img {
						width: 112rpx;
						height: 60rpx;
						margin: 0 40rpx;
					}
				}

				&-btn {
					height: 90rpx;
					border-radius: 46rpx;
				}
			}

			&__title {
				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: calc((100% - 310rpx)/2);
					width: 310rpx;
					height: 16rpx;
					border-radius: 2rpx;
					background-color: var(--color-primary);
					opacity: .2;
				}
			}

			&__foot {
				padding: 0 130rpx;

				&-icon {
					width: 84rpx;
					flex: 0 0 84rpx;
					height: 84rpx;

					&::after {
						content: '';
						position: absolute;
						left: 0;
						top: 0;
						width: 84rpx;
						height: 84rpx;
						border-radius: 100%;
						background: #E4EDFF;
						box-shadow: inset 0 0 20rpx 0 var(--color-primary);
						opacity: .19;
					}

				}
			}
		}
	}
	.pop-panel {
		width: 80vw;
		padding:30rpx 0 0 0;
		color:#999;
	}
	.pop-panel-footer {
		height: 100rpx;
		border-top:1rpx solid #ccc;
	}
	.pop-panel-footer-left {
		height: 100rpx;
		border-right:1rpx solid #ccc;
	}
</style>